/* 系统字典页面 */
<template>
  <zero-container :loading="dataListLoading">
    <!-- 左边信息-start -->
    <div slot="aside">
      <TreeSide @sysDictFun="sysDictFun"
                @dataListLoadingFun="dataListLoadingFun" />
    </div>
    <!-- 左边信息-end -->
    <!-- 右边信息-start -->
    <div slot="main"
         style="height: 100%">
      <vxe-grid border
                resizable
                keep-source
                ref="xGrid"
                id="xGrid"
                height="auto"
                :columns="tableColumn"
                :toolbar="{
          zoom: true,
          custom: true,
          slots: { buttons: 'toolbar_buttons' },
        }"
                :edit-config="{
          trigger: 'manual',
          mode: 'row',
          showStatus: true,
          icon: 'fa fa-file-text-o',
        }"
                :edit-rules="validRules"
                :data="dataList"
                :custom-config="{ storage: true }"
                @checkbox-change="dataListCheckboxChangeHandle"
                @checkbox-all="dataListCheckboxChangeHandle">
        <template v-slot:toolbar_buttons>
          <el-button v-if="$hasPermission(mixinViewModuleOptions.addUrl)"
                     :disabled="addBtnDisabled"
                     type="primary"
                     @click="insertEvent()"
                     size="small">
            新增
          </el-button>
          <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                     type="danger"
                     @click="deleteHandle(null, null, 'xGrid')"
                     :disabled="batchBtnDisabled"
                     size="small">
            批量删除
          </el-button>
        </template>
        <template v-slot:operate="{ row }">
          <template v-if="$refs.xGrid.isActiveByRow(row)">
            <vxe-button v-if="$hasPermission(mixinViewModuleOptions.addUrl)"
                        icon="fa fa-save"
                        status="primary"
                        title="保存"
                        circle
                        @click="saveRowEvent(row)"
                        size="small"></vxe-button>
          </template>
          <template v-else>
            <vxe-button v-if="$hasPermission(mixinViewModuleOptions.updateUrl)"
                        icon="fa fa-edit"
                        title="编辑"
                        circle
                        @click="editRowEvent(row)"
                        size="small"></vxe-button>
          </template>
          <vxe-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                      icon="fa fa-trash"
                      title="删除"
                      circle
                      @click="deleteHandle(row, row.name, 'xGrid')"
                      size="small"></vxe-button>
        </template>
      </vxe-grid>
    </div>
    <!-- 右边信息-end -->
  </zero-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
import TreeSide from './components/TreeSide' // 左边树
export default {
  name: 'DatabaseInfo',
  mixins: [mixinViewModule],
  components: {
    TreeSide
  },
  data () {
    return {
      mixinViewModuleOptions: {
        isPage: false, // 不分页
        getDataListUrl: '/sysDictDetails/list',
        addUrl: '/sysDictDetails/add',
        updateUrl: '/sysDictDetails/update',
        deleteUrl: '/sysDictDetails/del',
        exportUrl: '/sysDictDetails/export',
        activatedIsNeed: false,
        el_table: false
      },
      addBtnDisabled: true,
      // 列信息
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { field: 'dictCode', title: '字典编码', width: 120 },
        { field: 'name', title: '名称', width: 100, editRender: { name: 'input' } },
        { field: 'sort', title: '排序', width: 80, editRender: { name: 'input' } },
        { field: 'value', title: '值', width: 100, editRender: { name: 'input' } },
        { field: 'createTime', title: '创建时间', width: 150, formatter: this.vxe_dateFormat },
        { field: 'remarks', title: '备注', editRender: { name: 'input' } },
        { title: '操作', width: 110, slots: { default: 'operate' } }
      ],
      validRules: {
        name: [
          { required: true, message: '请输入名称' }
        ],
        sort: [
          { required: true, message: '请输入排序' }
        ],
        value: [
          { required: true, message: '请输入值' }
        ]
      }
    }
  },
  methods: {
    dataListLoadingFun (val) {
      this.dataListLoading = val
    },
    sysDictFun (code) {
      if (code) {
        this.addBtnDisabled = false
        this.mixinViewModuleOptions.activatedIsNeed = true
        this.searchForm.dictCode = code
        this.getDataList()
      } else {
        this.dataList = []
      }
    },
    editRowEvent (row) {
      this.$refs.xGrid.setActiveRow(row)
    },
    async insertEvent () {
      const { row: newRow } = await this.$refs.xGrid.insertAt({ dictCode: this.searchForm.dictCode }, null)
      await this.$refs.xGrid.setActiveCell(newRow, 'name')
    },
    async saveRowEvent (row) {
      const errMap = await this.$refs.xGrid.validate().catch(errMap => errMap)
      if (!errMap) {
        this.$refs.xGrid.clearActived().then(() => {
          this.dataListLoading = true
          const config = {
            url: row.id ? this.mixinViewModuleOptions.updateUrl : this.mixinViewModuleOptions.addUrl,
            method: 'post',
            data: row
          }
          this.$axios(config)
            .then(res => {
              this.dataListLoading = false
              this.getDataList()
              this.$message.success(res.msg)
            })
            .catch(() => {
              this.dataListLoading = false
            })
        })
      }
    }
  }
}
</script>
